<template>
    <div class="mb-10">
        <div class="flex items-center text-xl font-bold text-gray-800 mb-5">
            <FireOutlined class="text-2xl text-blue-500 mr-2" />
            <span>推荐歌单</span>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-5">
            <div
                v-for="playlist in playlists"
                :key="playlist.id"
                class="cursor-pointer transition-transform duration-300 hover:-translate-y-1 group"
                @click="emit('select', playlist)"
            >
                <div class="relative w-full pb-[100%] rounded-lg overflow-hidden shadow-md">
                    <img
                        :src="playlist.cover"
                        :alt="playlist.name"
                        class="absolute top-0 left-0 w-full h-full object-cover"
                    />
                    <div
                        class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    >
                        <PlayCircleOutlined class="text-6xl text-white" />
                    </div>
                    <div class="absolute top-1 right-2 text-white text-xs flex items-center gap-1 drop-shadow-lg">
                        <CustomerServiceOutlined />
                        {{ formatPlayCount(playlist.playCount) }}
                    </div>
                </div>
                <div class="mt-2 text-sm text-gray-800 truncate">{{ playlist.name }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { FireOutlined, PlayCircleOutlined, CustomerServiceOutlined } from '@ant-design/icons-vue'
import type { Playlist } from './types'

// Props
defineProps<{
    playlists: Playlist[]
}>()

// Emits
const emit = defineEmits<{
    (e: 'select', playlist: Playlist): void
}>()

// Methods
const formatPlayCount = (count: number) => {
    if (count >= 100000000) {
        return (count / 100000000).toFixed(1) + '亿'
    }
    if (count >= 10000) {
        return (count / 10000).toFixed(1) + '万'
    }
    return count.toString()
}
</script>
